<template>
  <div class="loginBox">
    <el-dialog title="注册/登录"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="80px">
        <el-form-item label="手机号"
                      prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码"
                      prop="code">
          <el-input v-model="form.code">
            <el-button type="primary"
                       slot="append"
                       :disabled="sendCodeStatus"
                       @click="sendCode">{{ sendCodeStatus? `${sendCodeTime}s后重新发送` : '发送验证码'}}</el-button>
          </el-input>

        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="$emit('closeDialog', false)">取 消</el-button>
        <el-button type="primary"
                   @click="sendLogin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { smsCode, signup } from '@/api/yywkapi'
import { mapState } from 'vuex'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  //   created() {
  //     console.log('123143564', this.$store.state.yywk.yywktoken)
  //   },
  data() {
    return {
      form: {
        phone: '',
        code: '',
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入正确的验证码', trigger: 'blur' },
          {
            pattern: /^\d{6}$/,
            message: '请输入正确的验证码',
            trigger: 'blur',
          },
        ],
      },
      sendCodeStatus: false,
      sendCodeTime: 60,
      timer: null,
      recodetyr: null,
    }
  },
  methods: {
    sendCode() {
      //   this.$store.dispatch('yywk/setLoginUserInfos', {
      //     yywktoken: 111,
      //     yywkusername: 222,
      //     yywklastLogin: 333,
      //   })
      //   return
      if (this.recodetyr) {
        return
      }
      this.recodetyr = setTimeout(() => {
        this.recodetyr = null
      }, 1000)
      this.$refs.form.validateField('phone', (valid) => {
        if (!valid) {
          smsCode({
            username: this.form.phone,
            code: '',
          }).then((res) => {
            if (res.code === 0) {
              this.sendCodeStatus = true
              this.timer = setInterval(() => {
                this.sendCodeTime--
                if (this.sendCodeTime <= 0) {
                  clearInterval(this.timer)
                  this.sendCodeStatus = false
                  this.sendCodeTime = 60
                }
              }, 1000)
              this.$message({
                message: '验证码已发送',
                type: 'success',
              })
            } else {
              this.$message.error({
                message: res.msg,
                type: 'error',
              })
            }
          })
          //   this.$message({
          //     message: '验证码已发送',
          //     type: 'success',
          //   })
        }
      })
    },
    sendLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          signup({
            username: this.form.phone,
            code: this.form.code,
          }).then((res) => {
            console.log('res', res)
            if (res.code === 0) {
              //                 lastLogin
              // :
              // "2024-08-29T04:23:18.206Z"
              // loginToken
              // :
              // "66cff7b6632e76689c7a8797|ymn7bkx9"
              // status
              // :
              // 1
              // username
              // :
              //   ;('18658389858')

              this.$store.dispatch('yywk/setLoginUserInfos', {
                yywktoken: res.data.loginToken,
                yywkusername: res.data.username,
                yywklastLogin: res.data.lastLogin,
              })
              this.$emit('closeDialog', false)
              this.$message({
                message: '登录成功',
                type: 'success',
              })
              setTimeout(() => {
                window.location.reload()
              }, 500)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleClose(done) {
      this.$emit('closeDialog', false)
      done()
    },
  },
}
</script>

<style lang="scss" scoped>
.loginBox {
  .el-dialog {
    width: 500px;
    height: 400px;
  }
}
</style>
